<template>
  <div class="app-container">
    <!--    title-->
    <el-row>
      <el-col :span="24">
        <section-title
          :title="currentNode.name + title"
          icon-class="el-icon-s-data"
          border-bottom="false"
        >
          <el-button
            slot="left"
            size="mini"
            icon="el-icon-d-arrow-left"
            circle
            @click="goClusterStatus"
          ></el-button>
        </section-title>
      </el-col>
    </el-row>
    <!--    条件框-->
    <el-row>
      <el-col :span="24">
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          align="center"
        >
          <el-form-item label="查询种类" prop="status">
            <el-select
              v-model="target"
              size="mini"
              style="width: 120px"
              @change="targetChange"
            >
              <el-option
                v-for="item in targets"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="查询方式" prop="status">
            <el-select
              v-model="queryParams.selectMethod"
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="item in queryParams.selectMethods"
                :key="item.method"
                :label="item.name"
                :value="item.method"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间:">
            <el-date-picker
              v-model="queryParams.startTime"
              align="right"
              type="date"
              placeholder="开始时间"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="queryParams.endTime"
              align="right"
              type="date"
              placeholder="开始时间"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="显示方式" prop="status">
            <el-select
              v-model="queryParams.showMethod"
              size="small"
              style="width: 120px"
            >
              <el-option
                v-for="item in queryParams.showMethods"
                :key="item.method"
                :label="item.name"
                :value="item.method"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
              重置
            </el-button>
            <!--            <el-button icon="el-icon-download" size="mini" @click="downloadImg">下载</el-button>-->
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!--    图表-->
    <el-row>
      <el-col :span="24">
        <!--        <cpu-chart :executeMethod="childMethod" :chartId="target"></cpu-chart>-->
        <high-charts-cpu
          :title="target"
          :charts-data="chartsData"
        ></high-charts-cpu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import sectionTitle from '@/components/SectionTitle'
  import { BaseListMixin } from '@/mixins/BaseListMixin'
  import HighChartsCpu from '@/views/cluster-monitor/compoents/HighChartsCpu'

  export default {
    name: 'ChartDetail',
    components: { HighChartsCpu, sectionTitle },
    mixins: [BaseListMixin],
    data() {
      return {
        target: 'cpu', //请求的目标图表
        currentNode: undefined, //当前传入节点数据
        targets: [
          {
            id: 'cpu',
            name: '群集 CPU',
          },
          {
            id: 'disk',
            name: '群集 磁盘IO',
          },
          {
            id: 'network',
            name: '群集 网络IO',
          },
        ],
        title: '详细图表', //页面标签
        queryParams: {
          selectMethod: 'now', //选中的查询方式
          selectMethods: [
            //查询方式列表
            { method: 'period', name: '按照时间段查询' },
            { method: 'today', name: '查询今天数据' },
            { method: 'now', name: '查询最近两小时内数据' },
          ],
          showMethod: 'minute',
          showMethods: [
            //查询方式列表
            { method: 'moon', name: '月' },
            { method: 'day', name: '天' },
            { method: 'hour', name: '小时' },
            { method: 'minute', name: '分钟' },
          ],
          startTime: '',
          endTime: '',
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              },
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              },
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              },
            },
          ],
        },
        disableMixinCreated: true, // 禁止混入函数loadData执行
        childMethod: '',
        chartsData: {}, //图表数据
      }
    },
    created() {
      this.getTaregt()
    },
    methods: {
      //  关闭当前标签，返回上一页
      goClusterStatus: function () {
        this.$store.state.tagsView.visitedViews.splice(
          this.$store.state.tagsView.visitedViews.findIndex(
            (item) => item.path === this.$route.path
          ),
          1
        )
        this.$router.push(
          this.$store.state.tagsView.visitedViews[
            this.$store.state.tagsView.visitedViews.length - 1
          ].path
        )
      },
      //获取跳转地址传递的参数
      getTaregt: function () {
        if (this.$route.query.target != null) {
          this.target = this.$route.query.target
          this.title = this.$route.query.title
          this.currentNode = this.$route.query.currentNode
          this.chartsData = Object.assign({}, this.$route.query.chartsData)
        }
      },
      //执行查询
      handleQuery: function () {
        console.log(this.queryParams)
        console.log(this.target)
      },
      //重置搜索条件
      resetQuery: function () {
        this.queryParams.selectMethod = 'now'
        this.queryParams.showMethod = 'minute'
        this.queryParams.startTime = null
        this.queryParams.endTime = null
      },
      targetChange: function () {
        for (let i in this.targets) {
          if (this.targets[i].id == this.target) {
            this.title = this.targets[i].name
            return
          }
        }
      },
    },
  }
</script>

<style scoped></style>
